<template>
  <div class="container">
    <van-tabs
      v-model="active"
      animated
      color="#DBB47F"
      title-inactive-color="#666"
      title-active-color="#000"
      @click="changeTabs"
    >
      <van-tab v-for="(item,index) in tab" :title="item.name" :key="'iten'+index">
        <div class="content">
          <div class="title">用户数据</div>
          <div class="box">
            <div>
              <div>{{item.data.pending}}</div>
              <div>待处理</div>
            </div>

            <div>
              <div>{{item.data.processed}}</div>
              <div>已完成</div>
            </div>

            <div>
              <div>{{item.data.total}}</div>
              <div>业务总数</div>
            </div>

            <!-- <div>
              <div>49</div>
              <div>浏览量</div>
            </div>

            <div>
              <div>49</div>
              <div>浏览量</div>
            </div>

            <div>
              <div>49</div>
              <div>浏览量</div>
            </div>-->
          </div>
        </div>
      </van-tab>
    </van-tabs>

    <!-- echars 图表 -->
    <div class="charts">
      <div class="title">活动数据</div>
      <div id="myChart"></div>
    </div>

    <!-- 产品数据 -->
    <div class="produeList">
      <div class="title">产品数据</div>
      <div>
        <div class="proitem" v-for="(item,index) in productData" :key="'item'+index">
          <div>{{item.proName}}</div>
          <div>
            <van-progress :percentage="(Number(item.value)/Number(item.allValue))*100" stroke-width="8" :show-pivot="false"  :color="item.color" />
          </div>
          <div>{{item.allValue}}</div>
        </div>
  
 
      </div>
    </div>

    <ManagerFoot></ManagerFoot>
  </div>
</template>
<script>
import { Toast } from "vant";
import Api from "./../api/api";
import ManagerFoot from "./../components/ManagerFoot";
export default {
  components: {
    ManagerFoot
  },
  data() {
    return {
      active: 0,
      tab: [
        { name: "今日", data: {}, id: "1" },
        { name: "昨日", data: {}, id: "2" },
        { name: "本周", data: {}, id: "3" },
        { name: "本月", data: {}, id: "4" }
      ],
      productData:[
        {proName:'基金一号',value:335,allValue:500, color:'#6eb2fb'},
         {proName:'贷款一号',value:310,allValue:500, color:'#6dd4b7'},
         {proName:'存款一号',value:234,allValue:500, color:'#fed068'},
      ]
      // tab:['今日','昨日'],
    };
  },
  methods: {
    drawLine() {
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      setTimeout(() => {
        myChart.setOption({
          color: ["#6EB2FB", "#6DD4B7", "#FED068"],
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            bottom: 0,
            left: "center"
          },
          series: [
            {
              name: "访问来源",
              type: "pie",
              radius: ["50%", "75%"],
               center: ['50%', '40%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: "center"
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: "0.1rem",
                    fontWeight: "bold"
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [
                { value: 335, name: "贷款活动" },
                { value: 310, name: "拼团活动" },
              ]
            }
          ]
        });
      }, 300);
    },
    userData() {
      this.$axios
        .get(
          `${Api.HTTP.userData}?employeeCode=${localStorage.getItem(
            "employeeCode"
          )}&dateType=${this.active}`
        )
        .then(res => {
          console.log(res);
          let obj = {
            pending: res.data.pending,
            processed: res.data.processed,
            total: res.data.total
          };
          this.tab[this.active].data = obj;
          

        })
        .catch(function(error) {
          Toast("网络错误");
        });
    },
    changeTabs(title) {
      console.log();
      this.active = title;
      if( Object.keys(this.tab[this.active].data).length == 0){
        this.userData();
      }
      
    }
  },
  mounted() {
    this.drawLine();
    this.userData();
  }
};
</script>
<style scoped>
.proitem {
  width: 100%;
  display: flex;
  align-items: center;
  text-align: center;
  margin-top: 0.15rem;
  justify-content: space-between;
}
.proitem > div:nth-child(1) {
  width: 20%;
}
.proitem > div:nth-child(2) {
  width: 55%;
}
.proitem > div:nth-child(3) {
  width: 20%;
}
.container {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  padding-bottom: 1.2rem;
  background: #f6f5f5;
  overflow: hidden;
  overflow-y: auto;
}
.content {
  background: #fff;
  padding: 0.2rem;
  margin-top: 0.2rem;
}
.box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  background: #f6f5f5;
}
.box > div {
  background: #fff;
  width: 33.3%;
  padding: 0.2rem;
  box-sizing: border-box;
  text-align: center;
}
.box div:nth-child(1) {
  /* margin-bottom: 0.03rem; */
}
.box div:nth-child(2) {
  /* margin-bottom: 0.03rem; */
}
.box div:nth-child(3) {
  /* margin-bottom: 0.03rem; */
}
.box div div:nth-child(2) {
  color: #999;
  font-size: 0.23rem;
  margin-top: 0.2rem;
}

.van-tab__text {
  font-weight: bold;
}
.title {
  border-left: 4px solid #dbb47f;
  box-sizing: border-box;
  font-weight: bold;
  font-size: 0.27rem;
  padding-left: 0.2rem;
}
.charts {
  width: 100%;
  background: #fff;
  margin-top: 0.2rem;
  padding: 0.2rem;
  box-sizing: border-box;
}
.produeList {
  width: 100%;
  background: #fff;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
  padding: 0.2rem;
  box-sizing: border-box;
  font-size: 0.25rem;
}
#myChart {
  width: 100%;
  height: 3.5rem;
}
</style>